<template>
  <div>
    <router-view></router-view>
    <div v-if="route.path=='/dashboard'">
      <!-- 工作台 -->
      <div class="div1 flex-column">
        <!-- 上 -->
        <div class="top">
          <span>工作台</span>
          <span>{{ time }}</span>
        </div>
        <!-- 下 -->
        <div class="bottom flex-row ">
          <!-- 头像 -->
          <div class="avatar" @click="$router.push('/userinfo')">
            <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
          </div>
          <!-- 问候语 -->
          <div class="flex-column">
            <span>
              开始您一天的工作吧！
            </span>
            <span>
              开始您一天的工作吧！
            </span>
          </div>
        </div>
      </div>
      <!-- 项目卡片 -->
      <div class="div2 flex-column">
        <!-- 上 -->
        <div class="top">项目</div>
        <!-- 下 -->
        <div class="bottom">
          <!-- popover提示 -->
          <el-popover placement="top" :title="item.title" :width="200" trigger="click" :content="item.t1"
            v-for="item in card" :key="card.id">
            <template #reference>
              <!-- 循环渲染 -->
              <div class="card">
                <!-- 图标 -->
                <div class="card_top">
                  <div class="icon">
                    <img :src="item.icon" alt="图片加载中...">
                  </div>
                  <div class=" title">{{ item.title }}
                  </div>
                </div>
                <!-- 介绍 -->
                <div class="card_bottom">
                  <div class="t1">{{ item.t1 }}</div>
                  <div class="t2">{{ item.t2 }}</div>
                </div>
              </div>
            </template>
          </el-popover>
        </div>
      </div>
      <!-- 开发依赖 -->
      <div>
        <!-- Descriptions 描述列表 -->
        <el-descriptions style="margin-top:20px" title="生产依赖" :column="column" size="default" border>
          <el-descriptions-item v-for="item in dependenciesArray">
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <tickets />
                </el-icon>
                {{ item.depend }}
              </div>
            </template>
            <el-tag size="small">{{ item.version }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
        <!-- Descriptions 描述列表 -->
        <el-descriptions style="margin-top:20px" title="开发依赖" :column="column" size="default" border>
          <el-descriptions-item v-for="item in devDependenciesArray">
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <tickets />
                </el-icon>
                {{ item.depend }}
              </div>
            </template>
            <el-tag size="small">{{ item.version }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import useStore from "@/pinia/index.js";
import { ref, reactive, onBeforeUnmount } from "vue";
// 图标
import html from "@/assets/img/html.png"
import css from "@/assets/img/css.png"
import JavaScript from "@/assets/img/JavaScript.png"
import Vue from "@/assets/img/Vue.png"
import node from "@/assets/img/Nodejs.png"
import github from "@/assets/img/github.png"
// 引入package.json文件
import packageJson from "../../../package.json";

// 获取路由
const route = useRoute()

// 开发依赖
let devDependenciesArray = []
// 生产依赖
let dependenciesArray = [];
// 总数据
let packageData = [];
// 自执行函数，提取package.json数据
; (() => {
  // 提取json数据，转换成key:value形式
  for (const [key, value] of Object.entries(packageJson.devDependencies)) {
    // devDependenciesArray.push(`${key}: ${value}`)// [ axios: ^0.27.2 , axios: ^0.27.2 ]
    devDependenciesArray.push({ depend: key, version: value }) // [{depend: 'axios', version: '^0.27.2'}]
  }
  for (const [key, value] of Object.entries(packageJson.dependencies)) {
    dependenciesArray.push({ depend: key, version: value })
  }
  // package.json中的依赖
  packageData.push({ devDependencies: dependenciesArray }, { dependencies: dependenciesArray })
})();

//Descriptions 描述列表的列数 
let column = ref(2);
// 监听当前屏幕宽度变化，修改Descriptions 描述列表的列数,初始化判断一次
// TODO：使用防抖函数，防止多次触发，优化性能
; (window.onresize = function () {
  if (window.innerWidth < 675) {
    // 小屏幕
    column.value = 1
  } else if (window.innerWidth < 800) {
    // 中屏幕
    column.value = 2
  } else {
    // 大屏幕
    column.value = 3
  }
})();

// 卡片数据
const card = reactive([
  {
    id: 1,
    title: 'HTML5',
    icon: html,
    t1: 'HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。',
    t2: '开源君，2022-07-08',
  },
  {
    id: 2,
    title: 'CSS3',
    icon: css,
    t1: 'CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块',
    t2: '开源君，2022-07-08',
  },
  {
    id: 3,
    title: 'JavaScript',
    icon: JavaScript,
    t1: 'JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。',
    t2: '开源君，2022-07-08',
  },
  {
    id: 4,
    title: 'Vue.js',
    icon: Vue,
    t1: 'Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。',
    t2: '开源君，2022-07-08',
  },
  {
    id: 5,
    title: 'Node.js',
    icon: node,
    t1: 'Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型，让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。',
    t2: '开源君，2022-07-08',
  },
  {
    id: 6,
    title: 'GitHub',
    icon: github,
    t1: 'GitHub是一个面向开源及私有软件项目的托管平台，因为只支持Git作为唯一的版本库格式进行托管，故名GitHub。',
    t2: '开源君，2022-07-08',
  },
])

// 获取当前时间
let time = ref(new Date().toLocaleTimeString())
const getTime = () => {
  let date = new Date();
  let hour = date.getHours();//小时
  let minute = date.getMinutes();//分钟
  let second = date.getSeconds();//秒
  if (hour < 10) {
    hour = "0" + hour
  }
  if (minute < 10) {
    minute = "0" + minute
  }
  if (second < 10) {
    second = "0" + second
  }
  return time.value = `${hour}:${minute}:${second}`
}

// 每秒刷新时间
const timeInter = setInterval(() => {
  getTime();//初始调用一次，然后每秒调用
}, 1000)

// 离开页面销毁
onBeforeUnmount(() => {
  clearInterval(timeInter)
  console.log("销毁时间定时器");
})
</script>

<style lang="less" scoped>
.el-collapse {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: center;
}

.div1 {
  .top {
    width: 100%;
    height: auto;
    font-size: 24px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }

  .bottom {
    width: 100%;
    height: auto;
    font-size: 20px;
    margin-bottom: 20px;

    .avatar {
      width: 60px;
      height: 60px;
      margin-right: 20px;

      img {
        width: 60px;
        height: 60px;
        object-fit: fill;
        border-radius: 50%;
        cursor: pointer;

        &:hover {
          // 阴影
          box-shadow: 0 0 5px 1px rgb(19 124 189 / 50%);
        }
      }
    }

    .flex-column {
      span:nth-child(1) {
        margin-bottom: 10px;
        word-break: break-word; //断行
        -webkit-line-clamp: 1; //行数
        text-overflow: ellipsis; //省略号
        white-space: normal; // 换行
        overflow: hidden; // 溢出隐藏
        display: -webkit-box; //显示多行文本
        -webkit-box-orient: vertical; //盒子垂直排列
      }

      span:nth-child(2) {
        font-size: 14px;
        color: #666;
        word-break: break-word; //断行
        -webkit-line-clamp: 2; //行数
        text-overflow: ellipsis; //省略号
        white-space: normal; // 换行
        overflow: hidden; // 溢出隐藏
        display: -webkit-box; //显示多行文本
        -webkit-box-orient: vertical; //盒子垂直排列
      }
    }
  }
}

.div2 {
  border: 1px solid #efeff5;
  border-radius: 4px;

  .top {
    width: 100%;
    height: 50px;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #efeff5;
    // border: 1px solid #efeff5;
    // border-top-left-radius: 4px;
    // border-top-right-radius: 4px;
  }

  .bottom {
    width: 100%;
    height: 300px;
    padding: 10px;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: repeat(2, 48%); // 行高度,2是分成几列,48%是每行的高度
    grid-template-columns: repeat(3, 32%); // 列宽度,3是分成几行,32%是每列的宽度
    align-content: space-between; // 垂直方向的对齐方式
    justify-content: space-between; // 水平方向的对齐方式
    align-items: center; // 垂直方向的对齐方式
    // border-left: 1px solid #efeff5;
    // border-right: 1px solid #efeff5;
    // border-bottom: 1px solid #efeff5;
    // border-bottom-left-radius: 4px;
    // border-bottom-right-radius: 4px;


    .card {
      width: 100%;
      height: 100%;
      display: flex;
      border: 1px solid #efeff5;
      flex-direction: column;
      border-radius: 4px;


      // 阴影+小手
      &:hover {
        box-shadow: 0 0 5px 1px rgb(19 124 189 / 50%);
        cursor: pointer;
      }

      .card_top {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        height: 50px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        border-bottom: 1px solid #efeff5;

        .title {
          font-size: 16px;
          font-weight: 600;
          height: 100%;
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .icon {
          width: 40px;

          img {
            width: 40px;
            height: 40px;
            object-fit: fill;
          }

        }
      }

      .card_bottom {
        width: 100%;
        height: 100%;
        padding: 10px;
        box-sizing: border-box;
        color: #666666; //字体颜色

        .t1 {
          font-size: 14px;
          font-weight: 500;
          margin-bottom: 10px;
          line-height: 1.2;
          word-break: break-word; //断行
          -webkit-line-clamp: 2; //行数
          text-overflow: ellipsis; //省略号
          white-space: normal; // 换行
          overflow: hidden; // 溢出隐藏
          display: -webkit-box; //显示多行文本
          -webkit-box-orient: vertical; //盒子垂直排列
        }

        .t2 {
          font-size: 14px;
          font-weight: 500;
          line-height: 1.2;
          word-break: break-word; //断行
          -webkit-line-clamp: 1; //行数
          text-overflow: ellipsis; //省略号
          white-space: normal; // 换行
          overflow: hidden; // 溢出隐藏
          display: -webkit-box; //显示多行文本
          -webkit-box-orient: vertical; //盒子垂直排列
        }
      }
    }
  }
}


// 文本限制两行,超出显示省略号
.test {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

<style>
.el-card__header {
  padding: 10px !important;
}
</style>